<script lang="ts" setup>
import { LocalAuthorStoreArrType } from "@/typing";
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { localStoriesStore, userLocalStoriesStore } from "../../store";

const router = useRouter()
const userStore = userLocalStoriesStore();
const { updateIsShowUser } = userStore;

const localStore = localStoriesStore();
const { getAuthorCollectList } = localStore;

const collectList = ref<LocalAuthorStoreArrType>();

render();

function render() {
    collectList.value = getAuthorCollectList();
}

function goBackFunc() {
    updateIsShowUser(false);
    router.push({ name: 'user' });
}
</script>

<template>
    <div class="h-screen bg-white">
        <div class="p-5 flex items-center bg-white border-b">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
            <div class="text-center text-2xl w-11/12 ">我的关注</div>
        </div>

        <img v-show="(collectList?.length == 0 || collectList == undefined)" class="w-64 mt-32 ml-48"
            src="@/assets/user/no_stow_pic.png" alt="img">

        <div v-show="(collectList?.length != 0)">
            <div v-for="l in collectList" :key="l.user_id" class="flex mx-8 py-3 mb-3 border-b items-center">
                <img class="w-20 h-20 rounded-full mr-5" :src="l.web_url" alt="img">
                <div class="w-9/12">
                    <div class="text-2xl mb-3 font-bold">{{ l.user_name }}</div>
                    <div class="text-gray-400">{{ l.desc }}</div>
                </div>
                <img class="w-12 h-12" src="@/assets/user/forward.png" alt="img">
            </div>
        </div>
    </div>
</template>

